<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="<%=basePath%>css/common_new.min.css">
<link rel="stylesheet"
	href="<%=basePath%>static/css/owl.carousel.min.css">
<link rel="stylesheet" href="<%=basePath%>css/zupin03.css">
<script src="<%=basePath%>/static/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/layer/2.4/layer.js"></script>
<script type="text/javascript" src="<%=basePath%>static/jquery.validation/1.14.0/jquery.validate.js"></script>


<!-- 顶部登录 -->
<script rel="script" src="<%=basePath%>js/vue.min.js"></script>
<link rel="stylesheet"
	href="//at.alicdn.com/t/font_699355_5fafq7zsd2fq1tt9.css">
<link rel="stylesheet" href="<%=basePath%>css/index.css">


</head>
<body>
	<!-- 顶部导航栏 -->
	<section>
	<jsp:include page="yeah-top.jsp" />
	</section>

	<section>
	<div class="row">
		<p>收货信息</p>
		<form action="#" method="post" id="formId">
			<div class="formz">
				<div class="form1" id="td3">
					<p>
						<span>所在地区：</span> <select class="demo" id="province"
								onchange="getCity()" name="state">
								<option>
									<c:if test="${address.state!=null}">${address.state }</c:if>
									<c:if test="${address.state==null}">请选择</c:if>
								</option>
							</select> <select class="demo" id="city" onchange="getDown()"
								name="city">
								<option>
									<c:if test="${address.city!=null}">${address.city }</c:if>
									<c:if test="${address.city==null}">请选择</c:if>
								</option>
							</select> <select class="demo" id="area" name="district">
								<option>
									<c:if test="${address.district!=null}">${address.district }</c:if>
									<c:if test="${address.district==null}">请选择</c:if>
								</option>
							</select>
					</p>
					<p>
						<span>详细地址：</span>
						<textarea rows="8" cols="40" id="address" name="address" data-msg-required="详细地址不能为空" data-rule-required="true">${address.address }</textarea>
					</p>
					<p style="margin-left: 13px;">
						<span>收货人：</span> <input type="text" name="name" value="${address.name }" data-msg-required="收货人不能为空" data-rule-required="true"/> <span
							style="margin-left: 13px;">手机号码：</span> <input type="text" name="phone" value="${address.phone }" data-msg-required="手机不能为空" data-rule-required="true">
					</p>
					<p style="margin-left: 27px;">
						<span>留言：</span>
						<textarea rows="8" cols="40" id="liuyan" name="liuyan"></textarea>
					</p>
				</div>
					<div class="form2">
						<input class="baocun" type="submit" value="保存地址" style="cursor: pointer;">
					</div>
			</div>
		</form>
		<form action="pay" method="post" onsubmit="return yanz()">
			<div class="shangpin">
				<table width="1200px">
					<thead>
						<tr style="height: 30px;line-height: 30px;background-color: #f5f5f5">
							<th width="200px">图片</th>
							<th width="200px">机型</th>
							<th width="200px">商品信息</th>
							<th width="200px">价格</th>
							<th width="200px">数量</th>
							<th width="200px">小计</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${stid }" var="stid">
							<input type="hidden" name="stid" value="${stid }"/>
						</c:forEach>
						<c:forEach items="${shopts }" var="shop">
							<input type="hidden" name="i_id" value="${shop.i_id }"/>
							<input type="hidden" name="cfid" value="${shop.cfid }"/>
							<input type="hidden" name="mun" value="${shop.mun }"/>
							<tr style="height: 100px;">							
								<th><img src="${shop.filePath }" style="width: 100px;height: 100px"></th>
								<th>${shop.title }</th>
								<th>${shop.colormemory }</th>
								<th>${shop.price }</th>
								<th>${shop.mun }</th>
								<th class="payment">${shop.payment }</th>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="but1" style="margin-top: 50px">
				<p>
					商品合计<span id="heji" style="font-size: 12px"></span>
				</p>
				<p>
					运费 <span style="font-size: 16px">包邮</span>
				</p>
				<p>
					应付总额 <span id="zonger" class="zong"></span>
				</p>
				<input type="submit" value="去付款" style="margin-top: 20px;cursor: pointer;">
			</div>
		</form>
	</div>
	</section><br style="clear: both;"/>

	<!-- 底部 -->
	<section>
	<!-- 底部 -->
	<jsp:include page="bottom.jsp" />
	
	<style type="text/css">
	.dibu{
		margin-top: 200px;
		background-color: #f3f3f3;
	}
	
	</style>
	
	
	</section>
	<script src="<%=basePath%>js/zupin03.js"></script>
	<script src="<%=basePath%>static/js/inquiry.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/province.js"></script>
	<script type="text/javascript">
		//获取地址
		var province = p.province;		
		$(function() {							
			for (var i = 0; i < province.length; i++) {								
				$("#province").append(
						"<option>" + province[i].name
								+ "</option>");
			}
		});


		//省份值改变事件
		function getCity() {
			//获取省份
			var s = $("#province").val();
			$("#city").empty();
			$("#area").empty();
			$("#city").append("<option>请选择</option>");
			$("#area").append("<option>请选择</option>");
			//获取省份下所有的市县
			for (var i = 0; i < province.length; i++) {
				if (s == province[i].name) {
					for (var j = 0; j < province[i].city.length; j++) {
						$("#city").append(
								"<option>" + province[i].city[j].name
										+ "</option>");
					}

				}

			}
		}

		function getDown() {
			//获取省份
			$("#area").empty();
			//$("#area").append("<option>请选择</option>");
			var s = $("#province").val();
			var c = $("#city").val();
			//获取省份下所有的市县
			for (var i = 0; i < province.length; i++) {
				if (s == province[i].name) {
					for (var j = 0; j < province[i].city.length; j++) {
						if (c == province[i].city[j].name) {
							for (var k = 0; k < province[i].city[j].area.length; k++) {
								$("#area").append(
										"<option>"
												+ province[i].city[j].area[k]
												+ "</option>");
							}

						}

					}

				}

			}

		}
		
		
		//总金额
		$(function(){
			var zonger=0;
			var payment=$(".payment");
			for (var int = 0; int < payment.length; int++) {
				zonger=Number(payment[int].innerHTML)+Number(zonger);
			}
			$("#heji").html("￥"+zonger);
			$("#zonger").html("￥"+zonger);
		});
		
		
		
		//地址表单验证
		$(function(){ 
			 $("#formId").validate( {
				         //做完表单验证后的  ajax后台数据验证 如果不满足条件 则禁止表单的提交
						 submitHandler: function(form){	
					     return yzdiqu()&&sub();
					     //发出ajax请求 根据回调函数的返回值 来判断checkBackitemExsit()的返回值；
					}, 
			 });
			 
		 });
		//验证地区
		function yzdiqu(){
			var state=$('[name="state"]').val();
			var city=$('[name="city"]').val(); 
			var district=$('[name="district"]').val();
			if(state=="请选择"||city=="请选择"||district=="请选择"){
				layer.msg("地区不能为空",{icon: 2,time:2000});
				return false;
			}else{
				return true;
			}
		}
		

		function sub() {  
	        // jquery 表单提交   
	       $.ajax({  
                cache: true,  
                type: "POST",  
                url:"addr",  
                data:$('#formId').serialize(),// 你的formid  
                async: false,  
                error: function(request) {  
                      
                },  
                success: function(data) {  
                	layer.msg("保存成功",{icon: 1,time:2000});  
                }  
            });   
	        return false;
	    }   
		
		//去付款验证地址
		function yanz(){
			var fale = false;
			$.ajaxSettings.async = false;
			$.post("yanz",function(data){
				if(data){
					fale = true;
				}else{
					layer.msg("请先保存地址",{icon: 2,time:2000});
				}
			},"json");
			$.ajaxSettings.async = true;
			return fale;
		}
		
		
	</script>
</body>
</html>